<template>
  <view>
    <uni-popup ref="payType" type="bottom" zindex>
      <view class="box-con padding">
        <view class="flex justify-between box-title border-b">
          <!-- <view class="text-bold text-xll padding-left-xs"> {{ orderType == 'meals' ? '请选择电子卡支付' : '请选择支付方式' }} </view> -->
          <view class="text-bold text-xll padding-left-xs">
            {{ props.source === 'card'||props.source==='cardset' ? '请选择电子卡' : '请选择套卡' }}
          </view>
          <!-- <view @tap="close" v-if="orderType !== 'meals'">
          		<text class="fcon-a-close text-xl"></text>
          	</view> -->
          <view class="bang_card" @click.stop="tapToBind('continue')">
            <text class="acon-Union-1 margin-right-xs"></text>
            <text>继续绑卡</text>
          </view>
        </view>
        <view class="card-list">
          <view class="card-ul">
            <view
              class="card-li flex justify-between padding-top-lg padding-bottom-lg padding-left-sm padding-right-sm border-b"
              v-for="(item,index) in cardlist" :key="index">
              <view class="c-left flex align-center" style="width: 50%;">
                <view class="prop-default" :class="{active:item.is_default !== '5'}"><text
                    v-if="item.is_default == '5'">默</text></view>
                <view class="text-c6 text-lg" style="position: relative;" :class="{locking:item.status == '-1'}">
                  <block v-if="item.type == 'card'">
                    {{formatCardNo(item.phone)}}
                  </block>
                  <block v-else>{{item.taoka}}</block>
                  <text v-if="item.status == '-1'" class="acon-suoding posi-suoding locking"></text>
                </view>

              </view>
              <view class="c-right flex flex-sub justify-end align-center"  @click="seleCards(item)">
                <view class="padding-right-lg text-c3" v-if="item.type == 'card'"
                  :class="{locking:item.status == '-1'}">¥{{item.amount}}</view>
                <view class="padding-right-lg text-c3" v-else>
                  <text class="text-c3" :class="{locking:item.status == '-1'}">{{item.min}}</text>/<text
                    class="text-c9">{{item.max}}</text>
                </view>
                <view class="seleCard">
                  <text class="text-xll margin-right-xs text-c6"
                    :class="item.select ? 'cuIcon-roundcheckfill':'cuIcon-round'"></text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted, nextTick } from 'vue'
  import { showLoading, hideLoading, plusXing, mnavTo, getSystemPhoneX } from '@/utils/helper';
  import mApi from "@/utils/mapi";
  const emit = defineEmits(["confirm"])
  const cardlist = ref<any>([])
  const props = defineProps({
    totalPayPrice: {
      type: Number || String,
      default: 0
    },
    carNumber: {
      type: Number || String,
      default: 0
    },
    isShow: {
      type: Boolean,
      default: false
    },
    source: {
      // mealCreatOrder-开通套餐，immediately-待支付订单
      type: String,
      default: 'card'
    },
    vbillid: {
      // type: Number||String,
      default: ''
    },
    tabPages: {
      type: Boolean,
      default: false
    }
  });
  const payType = ref(null)
  const ttyy = ref('')
  const open = (type) => {
    payType.value.open()
    if (type) {
      // ttyy.value = type
      cardlist.value = type
      // console.log(cardlist.value)
    }
  }

  const close = () => {
    payType.value.close()
  }

  const tapToBind = (source : any = '') => {
    // popupPayment.value.close()
    if (source == 'continue') {
      mnavTo('/pages/user/bindingCards/bindingCards?orderType=meals')
    }
  }

  // 格式化银行卡号的函数
  const formatCardNo = (cardNo) => {
    // 提取前三位和后四位，剩余部分用 *** 替换
    if (cardNo && cardNo.length >= 10) {
      return cardNo.slice(0, 3) + '***' + cardNo.slice(-4);
    }
    return cardNo; // 如果卡号不符合要求，返回原卡号
  };

  const seleCards = (item) => {
    if (item.status === '-1') {
      mApi.msg("该卡已锁，无法选择，请先去门店解锁！")
      return
    }
    if (item.select) {
      // 如果已经选中，则取消选择
      item.select = false;
    } else {
      // 否则，选择该项
      cardlist.value.forEach(card => {
        card.select = false; // 取消其他卡片的选中状态
      });
      item.select = true; // 选中当前项
      const selectedItems = cardlist.value.filter(card => card.select);
      const copiedItems = JSON.parse(JSON.stringify(selectedItems));
      emit("confirm", { copiedItems })
      close()
    }
  };

  defineExpose({ open, close })
</script>

<style scoped lang="scss">
  .box-con {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 40rpx;
    flex-shrink: 0;
    min-height: 602rpx;
    max-height: 96vh;
    position: relative;

    .modalTitle {
      font-size: 36rpx;
      font-weight: bold;
    }

    .close-btn {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
    }
  }

  .bang_card {
    color: #2CAC58;
    font-size: 32rpx;
    font-family: "Microsoft YaHei UI";

    .fcon-Union-1 {
      font-size: 32rpx;
      margin-right: 10rpx;
    }
  }

  .box-title {
    height: 80rpx;
  }

  .border-b {
    border-bottom: 2rpx solid #F3F3F3;
  }

  .prop-default {
    color: #53A87F;
    font-family: "Microsoft YaHei UI";
    font-size: 28rpx;
    border-radius: 4px;
    background: rgba(86, 191, 122, 0.28);
    display: inline-block;
    width: 35rpx;
    height: 35rpx;
    text-align: center;
    line-height: 35rpx;
    margin-right: 10rpx;

    &.active {
      background: transparent;
    }
  }

  .cuIcon-round {
    color: #999;
  }

  .cuIcon-roundcheckfill {
    color: #56BF7A;
  }

  .fcon-suoding {
    color: #d1d1d1;
    margin-right: 10rpx;
  }

  .posi-suoding {
    position: absolute;
    right: -25rpx;
    top: -5rpx;
    font-size: 25rpx;
  }

  .locking {
    color: #D1D1D1 !important;
  }
</style>